<template>
	<view class="ret-password">
		<!-- #ifdef H5 -->
		<uni-nav-bar dark left-icon="left" :fixed="true"  title="" background-color="#fff" color="#262E3F" @clickLeft="goBack()" />
		<!-- #endif -->
		<view class="box">
			<view class="account" v-if="pageIndex==0">
				<view class="h2">找回密码</view>
				<text>请输入账号</text>
				<view class="input">
					<input type="text" :value="accountText" @input="accountInput">
				</view>
			</view>
			<view class="verify" v-else-if="pageIndex==1">
				<view class="h2">身份验证：密保问题</view>
				<text class="tips">为了保护你的账号安全，需要验证你的身份，至少提供两个正确答案才能验证通过</text>
				<view class="question">
					<text>1.{{Answer.problem1}}</text>
					<view class="input">
						<input type="text" :value="answersText1" @input="(eve)=>{answersInput(eve, 1)}">
					</view>
				</view>
				<view class="question">
					<text>2.{{Answer.problem2}}</text>
					<view class="input">
						<input type="text" :value="answersText2" @input="(eve)=>{answersInput(eve, 2)}">
					</view>
				</view>
				<view class="question" v-show="pageIndex==1">
					<text>2.{{Answer.problem3}}</text>
					<view class="input">
						<input type="text" :value="answersText3" @input="(eve)=>{answersInput(eve, 3)}">
					</view>
				</view>
			</view>
			<view class="result" v-else-if="pageIndex==2">
				<view class="h2">验证结果</view>
				<view class="" v-if="answerCode">
					<text>验证通过，请修改密码</text>
					<view class="new-password">
						<text class="name">新密码</text>
						<input type="text" :value="newPassword" @input="passwordInput">
						<uni-icons type="eye-filled"></uni-icons>
					</view>
					<view class="new-password">
						<text class="name" style="letter-spacing: 1em;">确认</text>
						<input type="text" :value="againPassword" @input="againInput">
						<uni-icons type="eye-filled"></uni-icons>
					</view>
				</view>
				<view class="" v-else>
					<text class="tips">验证失败
					别着急，耐心想想之前的密保答案究竟是什么？</text>
				</view>
			</view>
			<view class="bottom-btn">
				<view class="btn-tips" v-if="pageIndex==1">
					{{Answer.frequency==3?'没有验证机会了':`还有${3-Answer.frequency}次验证机会`}}
				</view>
				<view class="xd-btn-text" @click="nextStep()">
					{{pageIndex==0?'下一步':pageIndex==1?'验证':answerCode?'保存':'返回重新填写'}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import md5 from '@/static/md5.min.js'
export default {
	data() {
		return {
			pageIndex: 0,
			accountText: '',
			answersText1: '',
			answersText2: '',
			answersText3: '',
			passed: 0,
			Answer: {},
			newPassword: '',
			againPassword: '',
			answerCode: '',
		}
	},
	onLoad(options) {
		this.accountText = options.account;
	},
	// #ifdef APP-PLUS
	onBackPress() {
		if(this.pageIndex!=0){
			this.goBack()
			return true;
		}
	},
	// #endif
	methods: {
		goBack(){
			if(this.pageIndex==0){
				this.utils.goBack()
				return
			}
			this.pageIndex--
			this.answerCode = ''
			
		},
		getAnswer(){
			
			this.api.get('secretProtection/getAnswer',{
				account: this.accountText
			}).then(res=>{
				if(res.data.state != 'ok') return;
				this.Answer = res.data.Answer
				this.pageIndex ++
			})
		},
		accountInput(eve){
			this.accountText = eve.detail.value;
		},
		answersInput(eve, i){
			this[`answersText${i}`] = eve.detail.value;
		},
		nextStep(){
			if(this.pageIndex == 2){
				
				if(this.answerCode){
					// 通过，修改密码
					this.secretProtection()
					
				}else{
					// 返回重新填写
					this.pageIndex = 1;
					this.answerCode = ''
				}
				return;
			}
			if(this.pageIndex == 1){
				this.verificationAnswer()
				return
			}
			if(this.pageIndex == 0){
				if(this.accountText){
					this.getAnswer()
				}else{
					uni.showToast({
						title: `请填写账号`,
						icon: 'none',
						duration: 2000,
						mask: true,
						position: 'bottom'
					})
				}
				
				return
			}
			this.pageIndex ++
		},
		verificationAnswer(){
			let verTips = '';
			if((3 - this.Answer.frequency)<=0){
				verTips = '没有次数了！'
			}else if(!this.answersText1 || !this.answersText2 || !this.answersText3){
				verTips = '请输入密保问题的答案。'
			}
			if(verTips){
				uni.showToast({
					title: verTips,
					icon: 'none',
					position: 'bottom',
					mask: true
				})
				return;
			}
			this.api.get('secretProtection/getVerificationAnswer', {
				answer1: this.answersText1,
				answer2: this.answersText2,
				answer3: this.answersText3,
				problem1: this.Answer.problem1,
				problem2: this.Answer.problem2,
				problem3: this.Answer.problem3,
				account: this.accountText
			}).then(res=>{
				let data = res.data;
				if(data.error&&data.error.code!=5012){
					return;
				}
				let num = parseInt(this.Answer.frequency)+1
				this.$set(this.Answer, 'frequency', num)
				this.pageIndex ++
				if(data.state=='ok') {
					this.answerCode = data.AnswerCode
					
				}
				
			})
		},
		passwordInput(eve){
			this.newPassword = eve.detail.value;
		},
		againInput(eve){
			this.againPassword = eve.detail.value;
			
		},
		secretProtection(){
			let passMsg = '';
			if(this.againPassword.length<6 || this.newPassword.length<6) {
				passMsg = '密码长度需大于6'
			}else if(this.newPassword!=this.againPassword){
				passMsg = '密码确认和新密码不相同'
			}
			if(passMsg!=''){
				uni.showToast({
					title: passMsg,
					icon: 'none',
					duration: 2000,
					mask: true,
					position: 'bottom'
				})
				return;
			}
			this.api.get('secretProtection/setPasswordByProtection', {
				password: md5(this.newPassword), //md5(password),
				answerCode: this.answerCode,
				account: this.accountText
			}).then(res=>{
				if(res.data.state!='ok') return
				uni.showToast({
					title: '密码修改成功',
					icon: 'none',
					duration: 2000,
					mask: true,
					position: 'bottom'
				})
				setTimeout(()=>{
					uni.reLaunch({
						url: '/pages/index/login'
					})
				}, 1000)
			})
		}
	}
}
</script>
<style lang="less" scoped>
	.ret-password{
		
		.box{
			margin: 100rpx 75rpx;
		}
		.h2{
			position: relative;
			font-size: 36rpx;
			font-weight: 700;
			line-height: 42rpx;
			padding-left: 24rpx;
			margin-bottom: 60rpx;
			&::after{
				position: absolute;
				content: '';
				left: 0;
				top: -4rpx;
				height: 50rpx;
				width: 10rpx;
				background-color: #55acee;
			}
		}
		.input{
			margin-top: 40rpx;
			height: 70rpx;
			
			width: 100%;
			background-color: #f2f2f2;
			border-radius: 10rpx;
			input{
				height: 70rpx;
				line-height: 70rpx;
				width: 88%;
				padding-left: 40rpx;
				font-size: 26rpx;
			}
		}
		.question{
			margin-top: 46rpx;
		}
		.result{
			.new-password{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #f2f2f2;
				padding: 10rpx 32rpx;
			}
			input{
				padding-left: 20rpx;
				width: 75%;
				font-size: 26rpx;
			}
			.name{
				display: inline-block;
				width: 84rpx;
				white-space: nowrap;
			}
		}
		.bottom-btn{
			margin-top: 60rpx;
			.btn-tips{
				font-size: 24rpx;
				margin-bottom: 12rpx;
				text-align: right;
				color: #d9001b;
			}
			.xd-btn-text{
				
				display: block;
				text-align: center;
			}
		}
		
	}
</style>